// 饼图
<template>
	<div :id="id" style="height:248px;padding:12px;" />
</template>
<script>
    export default {
        name: 'Annular',
        // eslint-disable-next-line vue/require-prop-types
        props: ['id', 'time'],
        data() {
            return {
                echartData: {},
                echartDataMain: [],
                myCharts: null
            }
            
        },
        mounted() {
            this.drawLine()
        },
        methods: {
             drawLine(){
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById(this.id))
                
                // 绘制图表
                myChart.setOption({
                    backgroundColor: '#f8f8f8',
                    title: {
                        text: '评论活跃度画像',
                        x: 'center',
                        top: 10,
                        textStyle: {
                            color: '#222',
                            fontSize: 16
                        }
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c}%"
                    },
                    legend: {
                        bottom: 20,
                        left: 'center',
                        data: ["评论1次", "评论2-5次", "评论6-10次", "评论10+次"] //此处修改为data.data.legend
                    },
                    color: ['#31c7c8', '#b4a3db', '#57b2ec', '#ffb885'],
                    series: [
                        {
                            name: '评论活跃度',
                            type: 'pie',
                            radius: '55%',
                            center: ['50%', '50%'],
                            label: {
                                show: true,
                                formatter: '{b}'
                            },
                            data: [
                                { "name": "评论1次", "value": 81.02 },
                                { "name": "评论2-5次", "value": 16.76 },
                                { "name": "评论6-10次", "value": 1.62 },
                                { "name": "评论10+次", "value": 0.61 }
                            ]//此处修改为data.data.series_data
                        }
                    ]
                });
            },
            initCharts() {
                this.chart = this.$echarts.init(document.getElementById(this.id))
                this.setOptions()
            },
            setOptions() {
                this.chart.setOption({
                    grid: {
                        top: '20',
                        left: '0',
                        right: '0',
                        bottom: '0',
                        containLabel: true
                    },
                    color: ['#ea9457', '#eddf49', '#55c6ff', '#5ee1cd'],
                    legend: [
                        // 左下第一个圆环图例
                        {
                            icon: 'circle',
                            bottom: 20,
                            // itemGap: 30,
                            textStyle: {
                                width: '50%',
                                color: '#ffffff'
                            },
                            // data: this.echartData.xAxis
                            data: [2, 2]
                        },
                        {
                            icon: 'circle',
                            bottom: 0,
                            textStyle: {
                                width: '50%',
                                color: '#ffffff'
                            },
                            data: [1, 2]
                        }
                    ],

                    series: [
                        // 主要展示层的
                        {
                            radius: ['30%', '60%'],
                            center: ['50%', '50%'],
                            type: 'pie',
                            silent: true,
                            label: {
                                normal: {
                                    show: true,
                                    formatter: '{c}个',
                                    textStyle: {
                                        fontSize: 14
                                    },
                                    position: 'inside'
                                },
                                emphasis: {
                                    show: false
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false,
                                    length: 30,
                                    length2: 55
                                },
                                emphasis: {
                                    show: false
                                }
                            },
                            name: '',
                            data: [1,1]
                        },
                        {
                            radius: '30%',
                            center: ['50%', '50%'],
                            type: 'pie',
                            silent: true,
                            label: {
                                normal: {
                                    show: false
                                },
                                emphasis: {
                                    show: false
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false,
                                    length: 30,
                                    length2: 55
                                },
                                emphasis: {
                                    show: false
                                }
                            },
                            name: '',
                            data: [1,1]
                        }, // 边框的设置
                        {
                            radius: '30%',
                            //  radius: ['30%', '40%'],
                            center: ['50%', '50%'],
                            type: 'pie',
                            zlevel: 3,
                            label: {
                                normal: {
                                    show: false
                                },
                                emphasis: {
                                    show: false
                                }
                            },
                            labelLine: {
                                normal: {
                                    show: false
                                },
                                emphasis: {
                                    show: false
                                }
                            },
                            animation: false,
                            tooltip: {
                                show: false
                            },
                            data: [
                                {
                                    value: 1,
                                    itemStyle: {
                                        color: 'rgba(0,0,0,0.3)'
                                    }
                                }
                            ]
                        }
                    ]
                })
            }
        }
    }
</script>
